<template>
  <div class="contain">
    <myNavbar title="添加"></myNavbar>
    <div class="contain_header">
      <text class="contain_header_title">添加支付宝或银行卡</text>
      <text class="contain_header_contain">请使用绑定本人的支付宝或银行卡账号</text>
    </div>
    <div class="contain_section">
      <div class="contain_section_contain"  @click="pick">
        <div class="contain_section_contain_text" style="justify-content: center">
          <text class="contain_section_contain_title" style="font-size: 30px;">添加</text>
        </div>
        <div class="contain_section_contain_wrap">
          <div style="display: flex;flex-direction: row;align-items: center">
            <text style="font-size: 28px;color:black;" v-if="paymentType">{{paymentType}}</text>
            <text style="font-size: 28px;color:black;" v-else >请选择要添加支付宝或银行卡</text>
          </div>
        </div>
      </div>

      <div class="contain_section_contain">
        <div class="contain_section_contain_text" style="justify-content: center">
          <text class="contain_section_contain_title" style="font-size: 30px;" >姓名</text>
        </div>
        <div class="contain_section_contain_wrap">
          <div style="flex: 1;">
              <input v-model="bankName" placeholder="请输入姓名" placeholder-color="#000000" class="contain_section_contain_wrap_input" maxlength='11' type="text"/>
          </div>
        </div>
      </div>


      <div class="contain_section_contain  contain_section_contain_bottom">
        <div class="contain_section_contain_text" style="justify-content: center">
              <text style="font-size: 30px">账号</text>
        </div>
        <div class="contain_section_contain_wrap" >
          <input v-model="bankNum" placeholder="请输入本人支付宝或银行卡账号" placeholder-color="#000000" class="contain_section_contain_wrap_input" maxlength='25' type="number"/>
        </div>
      </div>


      <div class="contain_section_contain"  @click="teamPick">
        <div class="contain_section_contain_text" style="justify-content: center">
          <text class="contain_section_contain_title" style="font-size: 30px;">团队</text>
        </div>
        <div class="contain_section_contain_wrap">
          <div style="display: flex;flex-direction: row;align-items: center">
            <text style="font-size: 28px;color: black" v-if="teamType">{{teamType}}</text>
            <text style="font-size: 28px;color: black" v-else >请选择要添加的团队</text>
<!--            color: darkgray;-->
          </div>
        </div>
      </div>

      <div class="contain_section_contain">
        <div class="contain_section_contain_text" style="justify-content: center">
          <text class="contain_section_contain_title" style="font-size: 30px;" >团队账号</text>
        </div>
        <div class="contain_section_contain_wrap">
          <div style="flex: 1;">
            <input v-model="teamUser" :placeholder="teamUserPlaceholder" placeholder-color="#000000" class="contain_section_contain_wrap_input" maxlength='11' type="text"/>
          </div>
        </div>
      </div>




    </div>
    <div class="contain_submit" @click="addbank">
      <div class="contain_submit_contain">
        <text class="contain_submit_title">添加</text>
      </div>
    </div>
  </div>

</template>
<script>
import myNavbar from "../../../components/myNavbar/myNavbar.vue";
// import { list as memberInfo} from '@/api/shareCenter'
import { save } from '@/api/account';

const picker = weex.requireModule('picker')
export default {
  data(){
    return{
      teamUserPlaceholder:'请输入团队账号',
      bankInfoId:"",
      bankName:'',
      bankNum:'',
      value: 0,
      paymentType:'',
      teamType:'',
      teamUser:'',
      teamTypeValue:0
    }
  },
  components: { myNavbar },
  created () {
  },
  mounted(){
  },
  methods:{
    pick(data) {
      this.imgType = data
      picker.pick({
        index:this.value,
        items: ['中国银行','宁波银行','邮政储蓄银行','建设银行','农业银行','华夏银行','北京银行','平安银行','广发银行','光大银行','兴业银行','浦发银行','中信银行','民生银行','招商银行','交通银行','微信','支付宝','工商银行']
      }, event => {
        if (event.result === 'success') {
          let items = ['中国银行','宁波银行','邮政储蓄银行','建设银行','农业银行','华夏银行','北京银行','平安银行','广发银行','光大银行','兴业银行','浦发银行','中信银行','民生银行','招商银行','交通银行','微信','支付宝','工商银行']
          this.paymentType = items[event.data]
          switch (this.paymentType) {
            case "中国银行":
              this.bankInfoId = 32
              break;
            case "宁波银行":
              this.bankInfoId = 33
              break;
            case "邮政储蓄银行":
              this.bankInfoId = 31
              break;
            case "建设银行":
              this.bankInfoId = 30
              break;
            case "农业银行":
              this.bankInfoId = 29
              break;
            case "华夏银行":
              this.bankInfoId = 28
              break;
            case "北京银行":
              this.bankInfoId = 26
              break;
            case "平安银行":
              this.bankInfoId = 18
              break;
            case "广发银行":
              this.bankInfoId = 17
              break;
            case "光大银行":
              this.bankInfoId = 15
              break;
            case "兴业银行":
              this.bankInfoId = 14
              break;
            case "浦发银行":
              this.bankInfoId = 13
              break;
            case "中信银行":
              this.bankInfoId = 12
              break;
            case "民生银行":
              this.bankInfoId = 11
              break;
            case "招商银行":
              this.bankInfoId = 10
              break;
            case "交通银行":
              this.bankInfoId = 9
              break;
            case "微信":
              this.bankInfoId = 1
              break;
            case "支付宝":
              this.bankInfoId = 2
              break;
            case "工商银行":
              this.bankInfoId = 8
              break;
            default:
              this.paymentType = '支付宝'
              this.bankInfoId = 2
          }
          console.log("1111111111111111111111111111111111111111")
          console.log(this.bankInfoId)
          this.value = event.data
        }
      })
    },
    teamPick(data) {
        picker.pick({
          index:this.teamTypeValue,
          items: ['宏米','存量宝','其他']
      }, event => {
        if (event.result === 'success') {
          let items = ['宏米','存量宝','其他']
          this.teamType = items[event.data]
          this.teamTypeValue = event.data
          switch (this.teamType) {
            case "宏米":
              this.teamUserPlaceholder = "请输入宏米账号"
              break;
            case "存量宝":
              this.teamUserPlaceholder = "请输入存量宝账号"
              break;
            case "其他":
              this.teamUserPlaceholder = "请输入其他账号"
              break;
          }

        }
      })
    },


    addbank(){
      // this.paymentType = '中国银行'
      var _this = this
      if (this.isNull(_this.bankName)) {
        eeui.toast('请输入姓名')
        return;
      }
      if(this.isNull(_this.bankNum)){
        eeui.toast('请输入支付宝账号')
        return;
      }
      if(this.isNull(_this.teamType)){
        eeui.toast('请输入团队')
        return;
      }
      if(this.isNull(_this.teamUser)){
        eeui.toast('请输入团队账号')
        return;
      }
      let params={
        bankInfoId:this.bankInfoId,
        bankName:this.bankName,
        bankNum:this.bankNum,
        team:this.teamType,
        teamUser:this.teamUser
      }
      console.warn(params)

        save(params).then(res=>{
          eeui.toast("添加成功")
          if(res.type='success'){
            setTimeout(()=>{
              eeui.closePage()
              this.$emit('getBank')
           },2000)
         }
      }).catch(repond=>{
        // eeui.toast(repond)
      })
    },

  }

}
</script>
<style scoped>
input {
  background: none;
  outline: none;
  border: none;
}
.contain{
  /* width: 100%; */
  width: 750px;
}

.contain_header{
  margin-top: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.contain_header_title{
  font-size: 40px;
  letter-spacing: 7px;

}
.contain_header_contain{
  font-size: 30px;
  margin-top: 25px;
  letter-spacing: 7px;
}
.contain_section{
  padding-left: 60px;
  padding-right: 60px;
  margin-top: 140px;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
}
.contain_section_contain{
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-top: solid;
  border-top-color:#f1f1f1;
  border-top-width: 1px;
  border-bottom: solid;
  border-bottom-color:#f1f1f1;
  border-bottom-width: 1px;
}
.contain_section_contain_bottom{
  border-top: none;
}
.contain_section_contain_text{
  width: 155px;
}
.contain_section_contain_wrap{
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
}
.contain_section_contain_wrap_input{
  width: 564px;
  font-size: 28px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  line-height: 58px;
  /*opacity: 0.4;*/
}


.contain_submit{
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 130px;
}
.contain_submit_contain{
  padding: 13px 140px;
  padding-top: 13px;
  padding-left: 140px;
  padding-bottom: 13px;
  padding-right: 140px;
  border-radius: 16px;
  background-color:#ff8400;
}
.contain_submit_title{
  font-size:35px;
  color:#ffffff;
}
</style>



